<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="../dist/carousellite.css" rel="stylesheet">
</head>

<body>
    <h1>Hello, world!</h1>
    <div class="container-fluid">
        <div class="carousellite-responsive carousellite-responsive-16by9" id="carousellite1" style="background-color:silver;">
            <div class="carousellite-template">
                <div class="carousellite-main">
                    <h2>Something</h2>
                </div>
                <div class="carousellite-prev">
                    <span class="glyphicon glyphicon-chevron-left carousellite-glyphicon" aria-hidden="true"></span>
                </div>
                <div class="carousellite-next">
                    <span class="glyphicon glyphicon-chevron-right carousellite-glyphicon" aria-hidden="true"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div style="margin-top:20px">
            <button class="btn btn-success" id="btn-f0">Alert Index</button>
            <button class="btn btn-success" id="btn-f1">Goto Index 0</button>
            <button class="btn btn-success" id="btn-f2">Goto Index 2</button>
        </div>
    </div>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="../dist/carousellite.js"></script>
    <script>
        $('#carousellite1').carousellite({
            animateNavigateDuration: 100,
            animateResetDuration: 50,
            animateRenderDuration: 90,
            data: [
                { url: 'https://placekitten.com/300/400', something: 'Title1' },
                { url: 'https://placekitten.com/260/260', something: 'Title2' },
                { url: 'https://placekitten.com/512/384', something: 'Title3' }
            ]
        }).on('clickNext', function (e) {
            console.log('clickNext');
            console.log(JSON.stringify(e));
        }).on('clickPrev', function (e) {
            console.log('clickPrev');
            console.log(JSON.stringify(e));
        }).on('render', function (e) {
            e.$container.find('.carousellite-main').find('h2').text(e.item.something);
            console.log('render index:' + e.index + ' count:' + e.count);
        });
        $('#carousellite1').carousellite('render');

        $('#btn-f0').click(function() {
            alert($('#carousellite1').carousellite('index'));
        });
        $('#btn-f1').click(function() {
            $('#carousellite1').carousellite('index', 0);
        });
        $('#btn-f2').click(function() {
            $('#carousellite1').carousellite('index', 3);
        });
    </script>
</body>

</html>